<template>
  <view class="content">
    <!-- 关于我们 -->
    <view class="title flex-y flex-x-center flex-y-center">
      <image class="logo" src="../../static/logo.png" mode="aspectFit"></image>
      <view class="mt60 fz34 gray3 bold">快存柜</view>
      <view class="intro mt40 gray9"
        >超便捷的智能共享寄存柜，帮您保管您的行李、背包、杂物等各类物品，释放双手自由出行</view
      >
    </view>
  </view>

  <view class="footer t-c">
    <view class="main-theme-color fz34" @click="popupShow(popupAgreenmentRef)"
      >快存柜用户协议(含隐私策略)</view
    >
    <view class="mt10 gray9 fz20">Copyright@湘乡市众辅电子产品商行</view>
  </view>

  <!-- 协议弹窗 -->
  <uni-popup ref="popupAgreenmentRef" type="center">
    <view class="popup popup-agreenment bg-white">
      <sw-icons
        class="popup-close"
        @click="popupClose(popupAgreenmentRef)"
        color="#ccc"
        size="40"
        icon="icon-guanbi"
      ></sw-icons>
      <view class="tit fz36 t-c">快存柜用户协议</view>
      <view class="ct fz30 t-j"><agreement-modal></agreement-modal></view>
      <view class="btn-box mt20 flex t-c fz34"
        ><view
          class="flex1 main-theme-bgcolor fff"
          @click="popupClose(popupAgreenmentRef)"
          >确认</view
        ></view
      >
    </view>
  </uni-popup>
</template>

<script setup>
import agreementModal from "@/components/agreement/index.vue";
import { ref, getCurrentInstance } from "vue";
import { onLoad } from "@dcloudio/uni-app";

const { proxy } = getCurrentInstance();

const popupAgreenmentRef = ref(null);

// 页面加载完成
onLoad(async () => {
  await proxy.$onLaunched;
});

// 展示弹窗
const popupShow = (name) => {
  name.open();
};

// 关闭弹窗
const popupClose = (name) => {
  name.close();
};
</script>

<style lang="less" scoped>
@import url("@/common/less/common.less");

.title {
  padding: 60rpx 30rpx;
  .logo {
    width: 154rpx;
    height: 154rpx;
  }

  .intro {
    line-height: 1.6;
  }
}
.footer {
  position: fixed;
  bottom: 0;
  left: 50%;
  z-index: 90;
  width: 750rpx;
  padding: 20rpx 0;
  transform: translateX(-50%);
}

.popup-agreenment {
  .tit {
    padding: 0 20rpx;
    border-bottom: 2px solid @line;
  }
  .ct {
    padding: 30rpx;
    line-height: 1.8;
    max-height: calc(100vh - 500rpx);
    overflow-y: auto;
    color: #666;
  }
  .btn-box {
    padding: 0;
  }
}
</style>
